<template>
  <div class="doctor">
    <!-- Breadcrumb 面包屑 -->

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>医院后台</el-breadcrumb-item>
      <el-breadcrumb-item>人员信息</el-breadcrumb-item>
      <el-breadcrumb-item>医生信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 选择器1职称 -->

    <el-select v-model="selectedTitle" clearable placeholder="请选择职称" style="box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" style="color: #708090; font-family: 宋体"> </el-option>
    </el-select>

    <!-- 选择器2科室 -->

    <el-select v-model="selectedDepartment" clearable placeholder="请选择科室" style="box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)">
      <el-option v-for="item in department" :key="item.value1" :label="item.label1" :value="item.value1" style="color: #708090; font-family: 宋体"> </el-option>
    </el-select>

    <el-card shadow="never" border="false">
      <!-- 卡片头部 -->

      <template #header>
        <div class="header">
          <span>共 {{ doctorDate.length }} 条记录</span>
          <!-- 添加医生按钮的点击事件处理器 -->
          <el-button icon="el-icon-plus" size="small" type="primary" round @click="showAddDoctorDialog" style="background-color: #6495ed">添加医生</el-button>
        </div>
      </template>

      <!-- 卡片的内容 -->

      <el-table stripe :data="filteredDoctors" style="width: 100%" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
        <el-table-column prop="doctorID" label="医生编号"> </el-table-column>
        <el-table-column prop="name" label="医生姓名"> </el-table-column>
        <el-table-column prop="department" label="科室"> </el-table-column>
        <el-table-column prop="title" label="职称"> </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>

        <!-- 删除和编辑按钮 -->
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-edit" @click="editDoctor(scope.row)">编辑</el-button>
            <el-button type="text" size="small" icon="el-icon-delete" style="color: red" @click="deleteDoctor(scope.row.doctorID)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加医生的对话框 -->
      <el-dialog title="添加医生" :visible.sync="dialogVisible" width="30%" @close="resetAddDoctorForm">
        <el-form ref="addDoctorForm" :model="newDoctor" label-width="80px">
          <el-form-item label="编号">
            <el-input v-model="newDoctor.doctorID" placeholder="请输入编号"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="newDoctor.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="科室">
            <el-select v-model="newDoctor.department" clearable placeholder="请选择科室">
              <el-option v-for="dept in department" :key="dept.value1" :label="dept.label1" :value="dept.value1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职称">
            <el-select v-model="newDoctor.title" clearable placeholder="请选择职称">
              <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="newDoctor.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitNewDoctor">确定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
  
  <script>
import { mapState, mapGetters } from 'vuex';

export default {
  name: 'doctor',
  data() {
    return {
      doctorDate: [],
      isEditing: false, // 新增标识，判断当前操作是添加还是编辑
      selectedDoctorToEdit: null, // 用于存储被编辑的医生信息
      // 数组options用于存储职称
      options: [
        { value: '主任医师', label: '主任医师' },
        { value: '副主任医师', label: '副主任医师' },
        { value: '主治医师', label: '主治医师' },
        { value: '住院医师', label: '住院医师' },
      ],
      value: '', // 数组department用于存储科室
      department: [
        { value1: '儿科', label1: '儿科' },
        { value1: '内科', label1: '内科' },
        { value1: '外科', label1: '外科' },
        { value1: '妇产科', label1: '妇产科' },
      ],
      value1: '',
      // 控制添加医生对话框的显示与隐藏
      selectedTitle: '',
      selectedDepartment: '',
      dialogVisible: false,
      newDoctor: {
        // 添加医生表单
        doctorID: '',
        name: '',
        department: '',
        title: '',
        phone: '',
      },
      selectedTitle: '', // 添加筛选状态变量
      selectedDepartment: '', // 添加筛选状态变量
    };
  },

  computed: {
    ...mapState('doctor', { doctors: state => state.doctors }),
    ...mapGetters('doctor', ['doctorCount']),

    // 新增计算属性以替代原有的 list 数组
    filteredDoctors() {
      // 直接使用 doctors 进行筛选
      if (!this.selectedTitle && !this.selectedDepartment) {
        return this.doctorDate;
      } else {
        this.doctorDate = this.doctors.filter(doctor => (!this.selectedTitle || doctor.title === this.selectedTitle) && (!this.selectedDepartment || doctor.department === this.selectedDepartment));
        // console.log(this.doctorDate.length);
        return this.doctorDate;
      }
    },
  },

  mounted() {
    this.doctorDate = this.doctors;
  },
  
  methods: {
    //删除医生信息
    deleteDoctor(doctorID) {
      this.$confirm('此操作将永久删除该医生信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // 调用删除医生的 action
          this.$store
            .dispatch('doctor/deleteDoctor', doctorID)
            .then(() => {
              this.$message({
                type: 'success',
                message: '删除成功!',
              });
            })
            .catch(() => {
              this.$message({
                type: 'error',
                message: '删除失败，请重试!',
              });
            });
        })
        .catch(() => {});
    },

    // 显示添加医生对话框
    showAddDoctorDialog() {
      this.dialogVisible = true;
    },

    // 重置添加医生表单
    resetAddDoctorForm() {
      this.newDoctor = {
        doctorID: '',
        name: '',
        department: '',
        title: '',
        phone: '',
      };
      // 如果使用表单验证，这里可以重置表单的验证状态
      // this.$refs.addDoctorForm.resetFields();
    },

    // 提交新医生/编辑后的医生信息方法调整
    submitNewDoctor() {
      this.$refs.addDoctorForm.validate(async valid => {
        if (valid) {
          // 检查医生编号是否为四个数字
          const isDoctorIDValid = /^\d{4}$/.test(this.newDoctor.doctorID);
          if (!isDoctorIDValid) {
            this.$message.error('医生编号必须为四个数字');
            return;
          }
          // 确保姓名为汉字
          const isNameValid = /^[\u4e00-\u9fa5]+$/u.test(this.newDoctor.name);
          if (!isNameValid) {
            this.$message.error('姓名必须为汉字');
            return;
          }
          // 确保姓名和科室已被填写
          if (!this.newDoctor.name || !this.newDoctor.department) {
            this.$message.error('姓名和科室为必填项');
            return;
          }
          let action = this.isEditing ? 'editDoctor' : 'addNewDoctor';
          await this.$store.dispatch(`doctor/${action}`, this.newDoctor);
          this.$message.success(this.isEditing ? '编辑医生信息成功！' : '添加医生成功！');
          this.dialogVisible = false;
          this.resetAddDoctorForm(); // 无论添加还是编辑后都重置表单
          this.isEditing = false; // 重置编辑状态
          this.selectedDoctorToEdit = null; // 清除被编辑的医生信息
        } else {
          this.$message.warning('请填写完整的信息');
        }
      });
    },

    // 编辑医生方法调整
    editDoctor(doctor) {
      this.isEditing = true; // 设置为编辑模式
      this.selectedDoctorToEdit = { ...doctor }; // 复制医生信息用于填充表单
      this.newDoctor = { ...this.selectedDoctorToEdit }; // 将编辑的医生信息赋值给newDoctor
      this.dialogVisible = true; // 显示对话框
    },

    //清空编辑中的医生信息
    resetEditDoctorForm() {
      this.editingDoctor = {}; // 清空编辑中的医生信息
    },
    async submitEditedDoctor() {
      this.$refs.editDoctorForm.validate(async valid => {
        if (valid) {
          // 提交编辑后的医生信息
          await this.$store.dispatch('doctor/editDoctor', this.editingDoctor);
          this.$message.success('编辑医生信息成功！');
          this.editDialogVisible = false;
          this.resetEditDoctorForm();
        } else {
          this.$message.warning('请填写完整的信息');
        }
      });
    },
  },

  created() {},
};
</script>
  
  <style lang="scss" scoped>
.doctor {
  .el-breadcrumb {
    margin-top: 10px;
    margin-bottom: 25px;
  }
  // 职称科室选择器样式
  .el-select {
    width: 200px;
    height: 10px;
    margin-right: 66px;
  }
  //表格样式
  .el-card {
    margin-top: 25px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 16px;
    }
  }
}
</style>